<template>
  <div class="index">
    <div class="header_top">
      <div class="header_top_left">
        <img src="../../assets/img/fsl.png" >
      </div>
      <div class="header_top_right">
        <div class="logo">Kitten-Fishing后台系统</div>
        <div class="sanxiang">
          <div class="xiaoxi">
            <p class="xiaoxi_shuzi">6</p>
            <span class="iconfont icon-xiaoxi"></span>
          </div>
          <div class="touxiang">
            <img class="touxiang1" src="../../assets/img/1.jpg">
          </div>
          <div class="xiaoxi" @click="sign_out">
            <span class="iconfont icon-icon--"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="header_zhong">
      <div class="header_zhong1">
        <!-- 无限级菜单栏 -->
        <MenuLists :menuList="menus" />
      </div>
      <div class="header_zhong2">
        <div class="zizujian">
          <transition name="slide">
            <router-view/>
          </transition>
        </div>
      </div>
    </div>
    <div class="fixedMenu">
      <i class="fixedMenu1 fixedMenu1_ico el-icon-circle-plus-outline"></i>
      <div class="fixedMenu1">
        <i class="fixedMenu1_ico el-icon-refresh"></i>
      </div>
      <div class="fixedMenu1">
        <i class="fixedMenu1_ico el-icon-edit-outline"></i>
      </div>
      <div class="fixedMenu1">
        <i class="fixedMenu1_ico el-icon-full-screen"></i>
      </div>
      <div class="fixedMenu1">
        <i class="fixedMenu1_ico el-icon-trophy-1"></i>
      </div>
      <div class="fixedMenu1">
        <i class="fixedMenu1_ico el-icon-location-outline"></i>
      </div>
    </div>

  </div>
</template>

<script>
  import MenuLists from "./menulist.vue"
  export default {
    name: 'index',
    components:{
      MenuLists
    },
    data() {
      return {
        // 存放面包屑的地址
        indexBreadcrumbs: [],
        // 包含选中的菜单路径
        breadcrumbListData:[],
        // 数据
        menus: [{
            id: '1',
            name: '代办中心',
            icon: 'icon-daibanshijian',
            path: '/daibanZX'
          },{
            id: '2',
            name: 'PO核销管理',
            icon: 'icon-daibanshixiang',
            path: '#2',
            child: [{
              id: '2-1',
              name: '创建PO核销',
              path: '/add_HX'
            }, {
              id: '2-2',
              name: 'PO核销列表',
              path: '/po_hexiaoLB',
            }]
          },{
            id: '3',
            name: '红冲核销管理',
            icon: 'icon-chouti',
            path: '/hongchongHX'
          }, {
            id: '4',
            name: '合同核销管理',
            icon: 'icon-hetong1',
            path: '/hetong_HX'
          },
          {
            id: '5',
            name: '核销管理',
            icon: 'icon-wenjian',
            path: '/HX_guanli'
          },
          {
            id: '6',
            name: '预算管理',
            icon: 'icon-jinqian',
            path: '/yusuan_GL'
          },
          {
            id: '7',
            name: '系统管理',
            icon: 'icon-xitongguanli',
            path: '/user'
          }
        ],
      }
    },
    watch:{
      $route(to,from){},
    },
    // 一个实例被创建之后执行的
    created (){
      // 首次加载页面默认打开的是首页
      this.$store.commit("bread","/daibanZX")

      if(this.$store.state.crumbs){
        this.indexBreadcrumbs =this.$store.state.crumbs.split(",");
      }
    },
    mounted() {

    },
    methods: {
      // 退出登录
      sign_out(val){
        this.$store.commit("loadingShow",{title:"退出中..."});
        setTimeout(()=>{
          this.$store.commit("loadingShow");//取消loading加载
          this.$store.commit('loginNo');//清除token
          this.$router.push("login");//跳转到login页面
        },1000)
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import url("../../assets/css/index.css");

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-enter{
    transform: translateX(-1000%);
  }
  .slide-enter-active{
    transition: transform 0.6s ease;
  }
  .slide-enter-to{
    transform: translateX(0%);
  }
  .slide-leave{
    transform: translateX(0%);
  }
  .slide-leave-active{
    transition: transform 0.4s ease;
  }
  .slide-leave-to{
    transform: translateX(1000%);
  }

  /* //设置侧边栏父级菜单高亮 */
  .el-submenu.is-active > .el-submenu__title {
    color: #29A7FA !important;
  }
  .el-submenu.is-active > .el-submenu__title > i{
    color: #29A7FA!important;
  }
</style>
